<template>
    <div class="xiaokong">
        <el-card>
            <template #header>
                楼栋
            </template>
            <el-button v-for="(item,index) in buildList" :key="index" @click="getBuildData(index)">{{item.name}}
            </el-button>
        </el-card>
        <el-card>
            <template #header>
                房间
            </template>
            <el-table :data="buildRoom" border :span-method="arraySpanMethod" :cell-style="cellStyle" @cell-click="cellClick">
                <el-table-column label="楼层">
                    <template #default="scope">
                        {{buildFloor[scope.$index].floorName}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="单元">
                    <el-table-column prop="" label="房号" />
                </el-table-column>
                <!-- 循环单元 -->
                <el-table-column v-for="unitItem in buildUnit" :key="unitItem.unitSort">
                    <template #header>
                        <!-- 单元名 -->
                        <div>{{ unitItem.unitName }}</div>
                    </template>
                    <el-table-column v-for="doorItem in buildDoor.filter(it => it.unitSort === unitItem.unitSort)"
                        :key="String(doorItem.unitSort) + String(doorItem.doorSort)">
                        <template #header>
                            <!-- 房间名 -->
                            <div>{{ doorItem.doorName }}</div>
                        </template>

                        <template #default="scope">
                            {{ scope.row[findTableCellIndex(scope.row, 'unitSort', unitItem, 'doorSort', doorItem)].roomNo }}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import rooms from './rooms'
export default {
    name: 'xiaokong',
    data() {
        return {
            buildList: [// 楼栋
                { id: 1, name: '小别墅' },
                { id: 2, name: '中心楼' }
            ],
            buildFloor: [], // 层
            buildUnit: [], // 单元
            buildDoor: [], // 一层几户
            buildRoom: [], // 所有的房间
            columnId: '', // 用于标记选中的单元格
            rowId: '', // 用于标记选中的单元格
        }
    },
    mounted() {
        this.getBuildData(0)
    },
    methods: {
        // 获取房间
        getBuildData(index) {
            this.buildFloor = rooms[index].data.buildFloor // 层
            this.buildUnit = rooms[index].data.buildUnit // 单元
            this.buildDoor = rooms[index].data.buildDoor // 一层几户
            this.getBuildRoom(rooms[index].data.buildRoom) // 房间数
        },
        // 获取数据并处理
        getBuildRoom(data) {
            // 创建一个map，根据每个房间的楼层号把所有房间塞到map里
            let map = new Map();
            data.forEach((item) => {
                if (map.has(item.floorSort)) {
                    map.get(item.floorSort).push(item);
                } else {
                    map.set(item.floorSort, [item]);
                }
            });
            console.log('根据层号把房间塞进map里面',map)
            // 创建一个楼层数长度的数组 准备存楼层
            let floorArray = new Array(this.buildFloor.length).fill('0');
            floorArray = floorArray
                .map((item, index) => map.get(index + 1))
                .reverse();
            this.buildRoom = floorArray
            console.log('再把这个map的value获取出来放到一个数组中，获得房间的最终数组', floorArray)
        },
        // 查找当前行单元格索引
        findTableCellIndex(originData, key1, data1, key2, data2) {
            return originData.findIndex(
                it => it[key1] === data1[key1] && it[key2] === data2[key2]
            );
        },
        // 合并表格
        arraySpanMethod({ columnIndex }) {
            if (columnIndex === 0) {
                return [1, 2]
            } else if (columnIndex === 1) {
                return [0, 0];
            }
        },
        cellStyle(obj) {
            if (obj.columnIndex === 0) {
                return 'background-color: #f5f7fa'
            } else if (this.columnId === obj.column.id && this.rowId === obj.row[0].roomId){
                return 'background-color: #B0C4DE'
            }
        },
        // eslint-disable-next-line
        cellClick(row, column, cell, event){
            this.columnId = column.id
            this.rowId = row[0].roomId
        }
    }
}
</script>